<%--
  Created by IntelliJ IDEA.
  User: bbb
  Date: 2025/3/24
  Time: 14:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>订单列表</title>
    <style>
        .order-list {
            margin: 20px;
        }
        .order-item {
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 5px;
        }
        .order-item a {
            margin-right: 10px;
            text-decoration: none;
            color: #337ab7;
        }
        .order-item a:hover {
            text-decoration: underline;
        }
        .no-orders {
            color: #999;
            font-style: italic;
        }
    </style>
</head>
<body>
<h1>订单列表</h1>
<div class="order-list">
    <c:if test="${empty pageInfo.list}">
        <p class="no-orders">您还没有任何订单。</p>
    </c:if>
    <c:if test="${not empty pageInfo.list}">
        <c:forEach var="order" items="${pageInfo.list}">
            <div class="order-item">
                <p>订单编号: ${order.order_id}</p>
                <p>路线名称: <a href="${pageContext.request.contextPath}/route/detail?route_id=${order.route.route_id}">${order.route.route_name}</a></p>
                <p>订单状态: 
                    <c:choose>
                        <c:when test="${order.orders_state == 0}">待支付</c:when>
                        <c:when test="${order.orders_state == 1}">已支付</c:when>
                        <c:when test="${order.orders_state == 2}">已取消</c:when>
                        <c:otherwise>未知状态</c:otherwise>
                    </c:choose>
                </p>
                <p>订单金额: ${order.orders_price} 元</p>
                <p>订单日期: <fmt:formatDate value="${order.buy_date}" pattern="yyyy-MM-dd" /></p>
                <p>成人数量: ${order.adult}</p>
                <p>儿童数量: ${order.child}</p>
                <a href="${pageContext.request.contextPath}/luyou/xiangqing?route_id=${order.route.route_id}"  target="_top">查看详情</a>
                <a href="${pageContext.request.contextPath}/order/delete?order_id=${order.order_id}">取消订单</a>
            </div>
        </c:forEach>
    </c:if>
</div>

<!-- 分页导航 -->
<div class="text-center mt-3">
    <nav aria-label="Page navigation">
        <ul class="pagination" style="list-style: none; margin: 0 auto; display: inline-flex; padding: 0;">
            <li class="page-item ${pageInfo.pageNum == 1 ? 'disabled' : ''}" style="margin: 0 2px;">
                <a class="page-link" href="${pageContext.request.contextPath}/order/qianlist?currentPage=1&pageSize=${pageInfo.pageSize}" aria-label="First" style="border-radius: 4px; padding: 8px 16px; border: 1px solid #ddd; text-decoration: none; color: #337ab7;">
                    <span aria-hidden="true">首页</span>
                </a>
            </li>
            <li class="page-item ${pageInfo.pageNum == 1 ? 'disabled' : ''}" style="margin: 0 2px;">
                <a class="page-link" href="${pageContext.request.contextPath}/order/qianlist?currentPage=${pageInfo.pageNum - 1}&pageSize=${pageInfo.pageSize}" aria-label="Previous" style="border-radius: 4px; padding: 8px 16px; border: 1px solid #ddd; text-decoration: none; color: #337ab7;">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <c:forEach begin="1" end="${pageInfo.pages}" var="i">
                <li class="page-item ${i == pageInfo.pageNum ? 'active' : ''}" style="margin: 0 2px;">
                    <a class="page-link" href="${pageContext.request.contextPath}/order/qianlist?currentPage=${i}&pageSize=${pageInfo.pageSize}" style="border-radius: 4px; padding: 8px 16px; border: 1px solid #ddd; text-decoration: none; color: ${i == pageInfo.pageNum ? '#fff' : '#337ab7'}; background-color: ${i == pageInfo.pageNum ? '#337ab7' : '#fff'};">${i}</a>
                </li>
            </c:forEach>
            <li class="page-item ${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}" style="margin: 0 2px;">
                <a class="page-link" href="${pageContext.request.contextPath}/order/qianlist?currentPage=${pageInfo.pageNum + 1}&pageSize=${pageInfo.pageSize}" aria-label="Next" style="border-radius: 4px; padding: 8px 16px; border: 1px solid #ddd; text-decoration: none; color: #337ab7;">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <li class="page-item ${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}" style="margin: 0 2px;">
                <a class="page-link" href="${pageContext.request.contextPath}/order/qianlist?currentPage=${pageInfo.pages}&pageSize=${pageInfo.pageSize}" aria-label="Last" style="border-radius: 4px; padding: 8px 16px; border: 1px solid #ddd; text-decoration: none; color: #337ab7;">
                    <span aria-hidden="true">尾页</span>
                </a>
            </li>
        </ul>
    </nav>
</div>
</body>

</html>
